<!DOCTYPE html>
<html>
<head>
  <base href="/">
  <title>标题</title>
  <meta content="no-cache" http-equiv="pragma">
  <meta content="no-cache" http-equiv="cache-control">
  <meta content="0" http-equiv="expires">
  <meta content="keyword1,keyword2,keyword3" http-equiv="keywords">
  <meta content="This is my page" http-equiv="description">

  <link href="/Css/bootstrap.css" rel="stylesheet" type="text/css"/>
  <link href="/Css/bootstrap-responsive.css" rel="stylesheet" type="text/css"/>
  <link href="/Css/style.css" rel="stylesheet" type="text/css"/>
  <link href="/My97DatePicker/skin/WdatePicker.css" rel="stylesheet" type="text/css"/>

  <script src="/bui/assets/js/jquery-1.8.1.min.js" type="text/javascript"></script>
  <script src="/My97DatePicker/WdatePicker.js" type="text/javascript"></script>

</head>
<body>
<form action="/account/search" class="definewidth m20" id="from1" method="post">
  <table class="table table-bordered table-hover definewidth m10">
    <tr>
      <td class="tableleft">消费类别：</td>
      <td>
        <select id="type" name="type">
          <option value="0">====请选择====</option>
          <option
              th:each="type : ${types}"
              th:selected="${queryType== type.id} ? 'true' : 'false' "
              th:text="${type.name }"
              th:value="${type.id }"
          ></option>
        </select>
        <select id="typeDetail" name="typeDetail">
          <option value='0'>====请选择====</option>
        </select>
      </td>

      <td class="tableleft">消费时间：</td>
      <td>
        <input class="Wdate" id="beginDate" name="beginDate" onFocus="WdatePicker()"
               th:value="${beginDate }"
               type='text'/>
        &nbsp;至&nbsp;
        <input class="Wdate" id="endDate" name="endDate"
               onFocus="WdatePicker({minDate:'#F{$dp.$D(\'beginDate\')}'})"
               th:value="${endDate }"
               type="text"/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </tr>
    <tr>
      <td colspan="4" style="text-align: center;">
        <button class="btn btn-primary" type="submit">查询</button>
        <button class="btn btn-primary" id="clear" type="reset">清空</button>
      </td>
    </tr>
  </table>
</form>

<table class="table table-bordered table-hover definewidth m10" th:if="${msg == null or msg == ''}">
  <thead>
  <tr>
    <th width="5%">编号</th>
    <th width="10%">消费时间</th>
    <th width="10%">类别</th>
    <th width="10%">详情</th>
    <th width="8%">消费/单次</th>
    <th width="8%">消费/每日</th>
    <th width="15%">描述</th>
    <th width="5%">操作</th>
  </tr>
  </thead>
  <tr th:each="acc,iterStat : ${accounts}">
    <td style="vertical-align: middle;" th:text="${iterStat.count}"></td>
    <td style="vertical-align: middle;"
        th:text="${#dates.format(acc.consumeDate, 'yyyy-MM-dd')}"></td>
    <td style="vertical-align: middle;" th:text="${acc.typeName}"></td>
    <td style="vertical-align: middle;" th:text="${acc.typeDetailName}"></td>
    <td style="vertical-align: middle;" th:text="${acc.price}"></td>
    <td style="vertical-align: middle;"
        th:colspan="${acc.colspan}"
        th:if="${acc.colspan != 0 and acc.rowspan != 0}"
        th:rowspan="${acc.rowspan}"
        th:text="${acc.priceForDateSum}"
    ></td>
    <td style="vertical-align: middle;" th:text="${acc.description}"></td>
    <td style="vertical-align: middle;">
      <a class="btn btn-success" onclick="return confirm('确定要删除吗？');"
         th:href="'/account/delete?id=' + ${acc.id }">删除</a>
    </td>
  </tr>
  <tfoot style="background-color: #a6f">
  <tr>
    <td>消费天数</td>
    <td th:text="${days}"></td>
    <td colspan="2">合计消费</td>
    <td th:text="${sum }"></td>
    <td>平均每日消费</td>
    <td colspan="2" th:text="${avg }"></td>
  </tr>
  </tfoot>
</table>

<table class="table table-bordered table-hover definewidth m10" th:if="${msg != null and msg !=''}">
  <tr>
    <td style="text-align: center;">
      <h3 th:text="${msg}"></h3>
    </td>
  </tr>
</table>

<script type="text/javascript">
  $(document).ready(function () {
    $("#type").change(function () {
      var typeId = $(this).val();
      $.ajax({
        url: "/account/getDetail",
        type: "POST",
        dataType: "json",
        data: {tId: typeId},
        async: false,//同步请求
        success: function (result) {
          $("#typeDetail").html("");
          let code = result.code;
          if (code != 200) {
            alert("获取详情失败, code=" + code + ", msg=" + result.msg);
            return;
          }

          $("#typeDetail").append("<option value='0'>====请选择====</option>");
          let resList = result.data;
          for (let i = 0; i < resList.length; i++) {
            let opHtml = "<option value='" + resList[i].id + "'>"
                + resList[i].name + "</option>";
            $("#typeDetail").append(opHtml);
          }
        }
      });
    });

    $("#type").trigger("change");

  })


</script>
</body>
</html>

